.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    inset: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 2px;
    background: #e47512;
    color: #fff;

}

.center{
    position: absolute;
    width: 200px;
    height: 200px;
    inset: 0;
    margin: auto;
    perspective: 1000px;
}

.cube{
    width: 200px;
    height: 200px;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-100px)  rotateX(70deg) rotateZ(-45deg);
    transition: all 1s ease-in-out;
    cursor: pointer;

    &:hover{
        transform: translateZ(-100px) rotateX(-120deg) rotateZ(135deg);
    }
}

.side{
    position: absolute;
    width: 200px;
    height: 200px;
}

.front{
    transform: rotateY(0deg) translateZ(100px);
    background: #fff;
}

.back{
    transform: rotateY(180deg) translateZ(100px);
    background: #ccc;
}

.right{
    transform: rotateY(90deg) translateZ(100px);
    background: #ddd;
}

.left{
    transform: rotateY(-90deg) translateZ(100px);
    background: #eee;
}


.top{
    transform: rotateX(90deg) translateZ(100px);
    background: #eee;
}

.bottom{
    transform: rotateX(-90deg) translateZ(100px);
    background: #ddd;
}


